<template>
  <div class="setting">
    <el-button class="setting"
               type="primary"
               :class="{'setting--show':show}"
               @click="show=!show"
               :icon="show?'el-icon-close':'el-icon-s-tools'"></el-button>
    <el-drawer append-to-body
               class="setting-panel"
               :with-header="false"
               :visible.sync="show"
               size="320px">
      <h5>导航模式</h5>
      <div class="setting-checkbox">
        <el-tooltip class="item"
                    effect="dark"
                    content="侧边菜单布局"
                    placement="top">
          <div @click="setting.sidebar='vertical'"
               class="setting-checkbox-item setting-checkbox-item--side">
            <i v-if="!isHorizontal"
               class="el-icon-check setting-checkbox--check">
            </i>
          </div>
        </el-tooltip>
        <el-tooltip class="item"
                    effect="dark"
                    content="顶部菜单布局"
                    placement="top">
          <div @click="setting.sidebar='horizontal'"
               class="setting-checkbox-item setting-checkbox-item--top">
            <i v-if="isHorizontal"
               class="el-icon-check setting-checkbox--check">
            </i>
          </div>
        </el-tooltip>
      </div>
      <h5>页面布局</h5>
      <div class="setting-checkbox">
        <div class="setting-item"
             v-for="(item,index) in list1"
             :key="index">
          {{item.label}}:
          <el-checkbox v-model="setting[item.value]"
                       size="small">
          </el-checkbox>
        </div>
      </div>
      <h5>功能调试</h5>
      <div class="setting-checkbox">
        <div class="setting-item"
             v-for="(item,index) in list2"
             :key="index">
          {{item.label}}:
          <el-checkbox v-model="setting[item.value]"
                       size="small">
          </el-checkbox>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  export default {
    data () {
      return {
        show: false,
        list1: [{
          label: '导航标签',
          value: 'tag'
        }, {
          label: '菜单折叠',
          value: 'collapse'
        }, {
          label: '菜单搜索',
          value: 'search'
        }, {
          label: '屏幕全屏',
          value: 'fullscren'
        }, {
          label: '主题选择',
          value: 'theme'
        }, {
          label: '主题颜色',
          value: 'color'
        }, {
          label: '顶部菜单',
          value: 'menu'
        }],
        list2: [{
          label: '意见反馈',
          value: 'screenshot'
        }, {
          label: '日志调试',
          value: 'debug'
        }, {
          label: '屏幕锁定',
          value: 'lock'
        }]
      }
    },
    computed: {
      ...mapGetters(["isHorizontal", 'setting']),
    }
  }
</script>


<style lang="scss" >
  .setting {
    position: fixed;
    top: 50%;
    right: -2px;
    z-index: 2048;
    transition: right 0.3s;
    &--show {
      right: 320px;
    }
    &-panel {
      .el-drawer__body {
        padding: 0 20px;
      }
    }
    &-item {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 8px;
    }
    &-checkbox {
      margin: 0 auto 20px 0;
      &--check {
        position: absolute;
        color: #409eff;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      &-item {
        display: inline-block;
        position: relative;
        width: 44px;
        height: 36px;
        margin-right: 16px;
        overflow: hidden;
        background-color: #f0f2f5;
        border-radius: 4px;
        box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
        cursor: pointer;
        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 33%;
          height: 100%;
          background-color: #fff;
          content: "";
        }
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 25%;
          background-color: #fff;
          content: "";
        }
        &--side {
          &:before {
            z-index: 1;
            background-color: #001529;
            content: "";
          }
          &:after {
            background-color: #fff;
          }
        }
        &--top {
          &:after {
            background-color: #001529;
          }
        }
      }
    }
  }
</style>